<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-for实例</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>v-for实例</h1>

	<hr>
	<div id="app">
		<ul>
			<li v-for="value in itemSort">{{value}}</li>
		</ul>
		<hr>
		<ul>
			<li v-for="(student,index) in studentsSort">
				{{index+1}}.{{student.name}}----{{student.age}}
			</li>
		</ul>
		<hr>
		<ul>
			<li v-for="value in item">{{value}}</li>
		</ul>
	</div>

</body>
<script type="text/javascript">
var app = new Vue({
	el:'#app',
	data:{
		item:[32,23,4000,56,674,45],
		students:[
			{name:'郭靖',age:32},
			{name:'杨过',age:22},
			{name:'张无忌',age:19},
			{name:'令狐冲',age:26},
		]
	},
	computed:{
		itemSort:function () {
			return this.item.sort(sortNumber);
		},
		studentsSort:function () {
			return sortByKey(this.students,'age')
		}
	}
})

function sortNumber(a,b) {
	return a-b;
}
//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}
</script>
</html>